<template>
	<view class="m-room">
		<view class="m-full-content" v-if="isShowFullScreen">
			<view class="back-box" v-if="!isHideBack">
				<mBack ref="fullScreenBack" @getGameResult="handleFullContentBack" :name="backName">
				</mBack>
			</view>
			<view class="full-box">
				<mAgentChat ref="mAgentChat" v-if="fullContentType=='chatPage'" :agentId="roleAgentId" :gameId="gameId"
					:heartLevel="heartInfo.level">
				</mAgentChat>
				<girlMainPage ref="girlMainPage" v-if="fullContentType=='mianPage'" @hideBackBtn="handleHideBack"
					@showBackBtn="handleShowBack"></girlMainPage>
				<mChatLevels ref="mChatLevels" v-if="fullContentType=='mChatLevels'" :agentName="myRoleCard.cardName"
					:heartLevel="heartInfo.level" @close="isHideBack=false;isShowFullScreen=false"
					:topBoxHeight="topBoxHeight" :avatar="myRoleCard.photoUrl">
				</mChatLevels>
			</view>
		</view>

		<view class="m-room-box-new" v-if="gameMode=='room-private'">
			<view class="room-top-info flex-row-start-center"
				:style="{'top':topInfoTop+'rpx','z-index':isStartGame?-1:999,'padding-left':toutiaoHeadLeft+'rpx'}"
				v-if="myRoleCard">
				<!-- 			<view class="top-info-avatar" @click.stop="handleJumpMain">
					<image class="cover-img top-info-avatar-img" :src="myRoleCard.photoUrl" mode="aspectFill"></image>
					<view class="info-heart-icon">
						<image class="cover-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1967c24a13564a45975e2af8ff5f010d.png"
							mode="aspectFill"></image>
						<view class="heart-num flex-row-center-center" v-if="heartInfo">
							{{heartInfo.level}}
						</view>
					</view>
				</view>
				<view class="top-info-content flex-column-center-center">
					<view class="top-info-name flex-row-start-center">
						<text class="top-info-name-text" @click.stop="handleJumpMain">{{myRoleCard.cardName}}</text>
					</view>
					<view class="top-info-heart-num flex-row-start-end" v-if="heartInfo">
						<view class="info-heart-progress" @click.stop="handleJumpMain">
							<view class="heart-progress-inner" :style="{width:heartProgressPercent+'%'}"></view>
							<view class="heart-progress-text flex-row-start-center">
								<text
									style="margin-right: 6rpx;">Lv.{{heartInfo.level}}</text><text>({{heartInfo.value}}/{{heartInfo.levelValue}})</text>
							</view>
						</view>
					</view>
				</view> -->
				<view class="flex-row-start-center" style="pointer-events: fill;" @click.stop="handleOpenChatInfo">
					<view class="top-agent-name" v-if="myRoleCard">{{myRoleCard.cardName}}</view>
					<view class="m-heart flex-row-center-center">
						<image class="cover-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1967c24a13564a45975e2af8ff5f010d.png"
							mode="aspectFill"></image>
						<view class="heart-num">{{heartInfo.level}}</view>
					</view>
				</view>

			</view>





			<view class="input-fly-box flex-row-start-center" :style="{bottom:keyboardHeight+'rpx',opacity:1}"
				@click.stop>
				<view class="fly-input-box flex-row-start-center">
					<input ref="inputRef" :adjust-position="false" v-model="inputMsg" type="text" :focus="inputIsFocus"
						@focus="inputFocus" @blur="inputBlur" @confirm="inputConfirmMessage"
						placeholder-style="color:#b9b9b9;" placeholder="说点什么..." confirm-type="send"
						class="fly-input-control flex-row-start-center"
						@keyboardheightchange="handleKeyBoardHeightChange" />
				</view>
				<view class="send-btn flex-row-center-center" :class="{'empty-value':!inputMsg}"
					@click="inputConfirmMessage">发送</view>
			</view>

			<view class="pk-functions-box flex-row-start-center" v-if="!isStartGame">
				<view class="pk-btns flex-row-start-center">
					<view class="pk-btn-item flex-row-center-center"
						:class="{'pk-input':item.key=='input','start-game':item.key=='start-game','hide-function-btn':item.hide}"
						v-for="(item,index) in gameOutsideBtns" :key="index" @click="handlePkBtnsClick(item,index)">

						<view class="pk-btn-item-default flex-row-center-center"
							v-if="item.key!='input'&&item.key!='start-game'">
							<image class="pk-btn-item-icon" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="input-control flex-row-start-center" v-if="item.key=='input'">
							说点什么...
						</view>
						<view class="start-game-content flex-row-center-center" v-if="item.key=='start-game'">
							<image class="pk-btn-item-icon" :src="item.image" mode="aspectFill"></image>
							<text class="start-game-content-text">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>




			<view class="pk-video-box" :class="{'pk-show':isStartGame}">
				<m-video ref="pkVideo" :storyId="storyId+'pk'" :storyUrl="pkVideoUrl" :selfLoop="true" :loopSec="-1"
					:showProgress="false" @onEnded="onEnded" @onTimeUpdate="onTimeUpdate" @onPlay="onPlay"
					useType="alone">
				</m-video>
			</view>
			<view class="pk-component" :class="{'pk-show':isStartGame}" :style="{'z-index':isStartGame?11:-1}">
				<!-- :paramsJson="actDanceParamsJson" -->
				<mFunGame ref="mFunGame" :duration="duration" :currentTime="currentTime" :useGameMode="pianoGameMode"
					@getGameResult="handleFunGameResult" @pauseVideo="pauseVideo" @playVideo="playVideo"
					@jumpBack="handleFunGameJumpBack" :paramsJson="actDanceParamsJson" :againNeedPlayVideo="false"
					@playAgain="handleGamePlayAgain">
				</mFunGame>
			</view>


		</view>
		<view class="base-tip-box flex-row-center-center" v-if="showTip">{{tipText}}</view>

		<view class="pk-sort-btn flex-row-start-center"
			:style="{top:sortBtnTop+'rpx','z-index':(isStartGame||isShowFullScreen)?-1:99999999}" v-if="true">
			<view class="pk-sort-icon">
				<image class="cover-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/717576875430439e8a6249c4737e93f1.png"
					mode="aspectFill"></image>
			</view>
			<view class="pk-sort-btn-list">
				<!-- <view class="sort-btn-item flex-row-center-center">小时榜</view> -->
				<swiper class="sort-swiper" :circular="true" :autoplay="true" :interval="2000" :duration="500"
					:vertical="true">
					<swiper-item v-for="(item,index) in sortTypeList" :key="index"
						@click="handleSortSwiperClick(item,index,'button')">
						<view class="sort-swiper-item flex-row-center-center">{{item.name}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<mGiftPop ref="mGiftPop" :gameId="gameId"></mGiftPop>
		<mPop ref="mPop" :popHeigh="popHeightNew" :maskCloseAble="maskCloseAble">
			<view class="room-pop flex-column-center-center" v-if="this.gameMode=='room'">
			</view>
			<view class="room-private-pop" v-if="gameMode=='room-private'">
				<view class="room-more-pop flex-column-start-center pop-default" v-if="popType=='more'">
					<scroll-view ref="roomMoreBtnsScrollView" scroll-y class="scroll-content" :show-scrollbar="false"
						:scroll-with-animation="true">
						<view class="more-btn-list flex-row-start-start">
							<view class="more-btn-item flex-row-center-center" v-for="(item,index) in gameMoreBtns"
								:key="index" @click="handlePkBtnsClick(item,index)">
								<image class=" more-btn-item-img" :src="item.image" mode="aspectFill"></image>
								<view class="more-btn-item-name">{{item.name}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="room-sort-pop flex-column-start-center pop-default" v-if="popType=='sort'">
					<view class="sort-pop-tab flex-row-start-center">
						<view class="sort-pop-tab-item flex-row-center-center"
							:class="{'act-sort-pop-tab-item':actSortTabIndex==index}"
							v-for="(item,index) in sortTypeList" :key="index"
							@click="handleSortSwiperClick(item,index)">{{item.name}}</view>
					</view>
					<view class="sort-pop-scroll">
						<swiper class="sort-pop-swiper" :current="actSortTabIndex" @change="handleSortSwiperChange"
							:duration="250">
							<swiper-item v-for="(item,index) in sortTypeList" :key="index">
								<view class="sort-pop-swiper-item">
									<scroll-view scroll-y class="scroll-content " :show-scrollbar="false"
										:scroll-with-animation="true">
										<view class="sort-list flex-column-start-center">
											<view class="sort-item flex-row-start-center"
												v-for="(sitem,sindex) in sortMockData" :key="sindex">
												<view class="sort-item-num flex-row-center-center"
													:style="{color:sindex==0?'red':sindex==1?'orange':sindex==2?'gold':'#cacddc'}">
													{{sindex+1}}
												</view>
												<view class="sort-item-avatar">
													<image class="cover-img" :src="sitem.avatar" mode="aspectFill">
													</image>
												</view>
												<view class="sort-item-name flex-column-center-start">
													{{sitem.name}}
												</view>
												<view class="sort-item-popularity" v-if="item.type=='popularity'">
													{{formatNumber(sitem.popularity)}}
												</view>
											</view>

										</view>
									</scroll-view>
									<view class="sort-user-item sort-item">
										<view class="sort-item flex-row-start-center">
											<view class="sort-item-num flex-row-center-center"
												:style="{color:userSort.sortNum==0?'red':userSort.sortNum==1?'orange':userSort.sortNum==2?'gold':'#cacddc'}">
												{{userSort.sortNum}}
											</view>
											<view class="sort-item-avatar">
												<image class="cover-img" :src="userSort.avatar" mode="aspectFill">
												</image>
											</view>
											<view class="sort-item-name flex-column-center-start">
												{{userSort.name}}
											</view>
											<view class="sort-item-popularity"
												v-if="actSortType&&actSortType.type=='popularity'">
												{{formatNumber(userSort.popularity)}}
											</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="room-update-pop flex-column-start-center pop-default" v-if="popType=='update'">
					<view class="update-top flex-row-start-end">
						<view class="update-level flex-row-start-end">
							<!-- <view class="update-level-tip">舞力等级：</view> -->
							<view class="update-level-content flex-row-start-end">
								<view class="update-level-icon">Lv.</view>
								<view class="update-level-now">
									<text v-if="dancePowerInfo">{{dancePowerInfo.level}}</text>
									<text v-else>0</text>
								</view>
								<view class="update-level-future">/<text
										v-if="dancePowerInfo">{{dancePowerInfo.levelLimit}}</text><text v-else>0</text>
								</view>
							</view>

						</view>
						<view class="update-progress flex-column-end-center">
							<view class="update-progress-text flex-row-end-center">
								<view class="tip-text">舞力：</view>
								<view class="power-text">
									<text
										v-if="dancePowerInfo">{{dancePowerInfo.value}}/{{dancePowerInfo.levelValue}}</text>
									<text v-else>0/0</text>
								</view>
							</view>
							<view class="update-progress-content flex-row-start-center">
								<view class="update-progress-inner" :style="{width:dancePowerUpdatePercent+'%'}">
								</view>
							</view>

						</view>

					</view>
					<view class="update-card-list">
						<scroll-view :scroll-x="true" style="white-space: nowrap" class="scroll-content"
							:show-scrollbar="false" :scroll-with-animation="true">
							<view class="update-card-list-content flex-row-start-center">
								<view class="update-card-item card-after-before card-farther"
									v-for="(item,index) in cardList" :key="index" :class="{
				  'blue-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'purple-card':item.RarityLevel==3,'colorful-card':item.RarityLevel==4
                }" @click="handleGirlCardItemClick(item,index)">
									<view class="no-choosed-masker" v-if="actGirlCardIndex!==index"></view>
									<view class="dance-girls-item-content  flex-row-center-center">
										<view class="card-level flex-row-start-center">
											<view class="card-level-icon">Lv.</view>
											{{item.level}}
										</view>
										<image class="cover-img" :src="item.image" mode="aspectFill"></image>
										<view class="start-box flex-row-center-center">
											<view class="start-item"
												v-for="(sitem, sindex) in getStartList(item.start, 5)" :key="sindex">
												<image class="start-img" v-if="sitem.active"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
													mode="aspectFill"></image>
												<image class="start-img" v-else
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
													mode="aspectFill"></image>
											</view>
										</view>
										<view class="rarity-level flex-row-start-center" v-if="item.RarityLevel">
											<image class="cover-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)"
												mode="aspectFill">
											</image>
										</view>
										<view class="bottom-info-new flex-row-center-center">
											<view class="name-box flex-row-center-center">{{ item.name }}</view>
										</view>
										<view class="locked-masker flex-row-center-center" v-if="item.locked">
											<view class="locked-tip flex-row-center-center">未获得</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="update-consume flex-column-start-center">
						<view class="update-consume-tip flex-row-start-center">升级消耗</view>
						<view class="update-consume-content flex-row-start-center">
							<view class="update-conusem-inner">
								<view class="n-reward-list" v-if="dancePowerInfo">
									<scroll-view :scroll-x="true" style="white-space: nowrap" class="scroll-content">
										<view class="reward-item" :class="{
								  'green-good': item.RarityLevel == 1,
								  'orange-good': item.RarityLevel == 2,
								  'blue-good': item.RarityLevel == 3,
								  'purple-good': item.RarityLevel == 4,
								  'gray-good': item.RarityLevel == 0,
								}" v-for="(item, index) in dancePowerInfo.consumeList" :key="index">
											<image class="reward-item-icon" :src="item.photoUrl" mode="aspectFill">
											</image>
											<view class="reward-num">
												<text
													:class="{'consume-no-enough':(item.myTotal<item.consumeNum)}">{{ item.myTotal }}</text>/{{item.consumeNum}}
											</view>
										</view>
									</scroll-view>
								</view>

							</view>
							<view class="update-btn-box flex-row-center-center" @click="handleCardUpGrade">
								<view class="update-btn-content  flex-row-center-center"
									:class="{'update-btn-not-enough':dancePowerInfo.notEnough}">
									<text v-if="dancePowerInfo.level==dancePowerInfo.levelLimit">突破</text>
									<text v-else>提升一级</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="game-pop flex-column-start-center pop-default"
					v-if="popType=='start-game'||popType=='prop'||popType=='dance'">
					<view class="game-pop-tabs flex-row-start-center">
						<view class="game-pop-tab-item flex-row-center-center" v-for="(item,index) in gamePopTabs"
							:key="index" :class="{'act-game-pop-tab-item':actPopTab.key==item.key}"
							@click="handleGamePopTabItemClick(item,index)">{{item.name}}</view>

						<view class="props-count flex-row-center-center" v-if="actPopTab.key=='choose-props'">
							({{propsCount}}/3)</view>
					</view>
					<view class="game-choose-content" v-if="actPopTab.key=='choose-dance'">
						<scroll-view :scroll-x="true" style="white-space: nowrap; " class="scroll-content">
							<view class="game-dance-list flex-row-start-center">
								<view class="game-dance-item" :class="{'act-game-dance-item':actDanceIndex==index}"
									v-for="(item,index) in danceList" :key="index"
									@click="handleGameDacneItemClick(item,index)">
									<view class="game-dance-item-choosed-icon">
										<image class="cover-img"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3a455ebf93f14033a1d9b26e17abe250.png"
											mode="aspectFill"></image>
									</view>
									<view class="item-border"></view>
									<image class="cover-img" :src="item.coverUrl" mode="aspectFill"></image>
									<view class="dance-item-bottom-info flex-row-center-end">
										<view class="dance-item-name flex-row-center-center">{{item.cardName}}</view>
									</view>
									<view class="item-locked flex-row-center-center" v-if="item.locked">
										<view class="item-locked-tips flex-row-center-center">{{item.lockedTips}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="game-choose-content flex-column-start-center game-props-choose-content"
						v-if="actPopTab.key=='choose-props'">
						<scroll-view scroll-y class="scroll-content " :show-scrollbar="false"
							:scroll-with-animation="true">
							<view class="game-props-list flex-row-start-start">
								<view class="game-prop-item flex-column-center-center"
									v-for="(item,index) in gamePropList" :key="index">
									<view class="setting-use-item-label" v-if="item.isUse">已装备</view>
									<view class="prop-item-center-content good-after-before flex-row-center-center"
										:class="{
                      'green-good': item.RarityLevel == 1,
                      'orange-good': item.RarityLevel == 2,
                      'blue-good': item.RarityLevel == 3,
                      'purple-good': item.RarityLevel == 4,
                    }">
										<image class="cover-img" :src="item.image" mode="aspectFill"></image>
										<view class="thing-num">
											<text v-if="item.num">{{item.num}}</text>
											<text v-else>0</text>
										</view>
									</view>
									<view class="prop-item-intro">{{item.intro}}</view>
									<view class="prop-item-button flex-row-center-center"
										:class="{'btnIsClick':index==btnClickIndex,'cancleBtn':item.isUse}"
										@click="handleGamePropItemClick(item,index)">
										<!-- 	<image class="consume-icon" v-if="!item.num"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
											mode="aspectFill"></image>
										<text v-if="!item.num">
											<text v-if="item.price">{{item.price}}</text>
											<text v-else>0</text>
										</text>
										<text v-if="item.isUse">取消</text>
										<text v-if="!item.isUse&&item.num">装备</text> -->


										<text v-if="item.isUse">取消</text>
										<text v-else>装备</text>

									</view>

								</view>
							</view>
						</scroll-view>

					</view>

					<view class="game-pop-button flex-row-center-center" v-if="actPopTab.key=='choose-dance'">
						<view class="pop-button flex-row-center-center" @click="handleStartGame"
							v-if="popType=='start-game'">
							开始挑战
						</view>
						<view class="pop-button flex-row-center-center" :class="{'cancleBtn':actDance.isDefault}"
							@click="handleConfirmDance" v-if="popType=='dance'">
							<text v-if="!actDance.isDefault">确认登场</text>
							<text v-else>已登场</text>
						</view>
					</view>



				</view>

				<view class="game-set-box flex-column-start-center pop-default" v-if="popType=='set'">
					<view class="game-pop-tabs flex-row-start-center">
						<view class="game-pop-tab-item flex-row-center-center" v-for="(item,index) in gameSetTypes"
							:key="index" :class="{'act-game-pop-tab-item':actSetType.key==item.key}"
							@click="handleGameSetItemClick(item,index)">{{item.name}}</view>
					</view>

					<view class="game-set-content">
						<scroll-view ref="gameSetScroll" scroll-y class="scroll-content" :show-scrollbar="false"
							:scroll-with-animation="true">
							<view class="game-set-list flex-row-start-start" v-if="actSetType.key=='clothes'">
								<view class="game-set-item good-after-before flex-row-center-center"
									v-for="(item,index) in pianoClothesList" :key="index" :class="{
							  'green-good': item.RarityLevel == 1,
							  'orange-good': item.RarityLevel == 2,
							  'blue-good': item.RarityLevel == 3,
							  'purple-good': item.RarityLevel == 4,
							  'act-setting-scroll-clothes':index == actPianoClothesIndex
							}" @click="handleGameSettingItemClick(item,index,'clothes')">
									<image class="cover-img" :src="item.image" mode="aspectFill"
										:class="{'isSelected':btnClickIndex==index}" v-if="actSetType.key!='judge'">
									</image>
									<image class="cover-img" :src="item.image" mode="widthFix"
										:class="{'isSelected':btnClickIndex==index}" v-else></image>
									<view class="item-masker flex-row-center-center" v-if="item.locked">
										<image class="locked-icon"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
											mode="aspectFill"></image>
									</view>
									<view class="setting-use-item-label" v-if="item.isUse">使用中</view>
									<view class="item-border-masker"></view>
									<image class="item-choose-icon" v-if="index == actPianoClothesIndex"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3a455ebf93f14033a1d9b26e17abe250.png"
										mode="aspectFill"></image>
								</view>
							</view>
							<view class="game-set-list flex-row-start-start" v-if="actSetType.key=='string'">
								<view class="game-set-item good-after-before flex-row-center-center"
									v-for="(item,index) in pianoStringList" :key="index" :class="{
						      'green-good': item.RarityLevel == 1,
						      'orange-good': item.RarityLevel == 2,
						      'blue-good': item.RarityLevel == 3,
						      'purple-good': item.RarityLevel == 4,
							  'act-setting-scroll-clothes':index == actStringIndex
						    }" @click="handleGameSettingItemClick(item,index,'string')">
									<image class="cover-img" :src="item.image" mode="aspectFill"
										:class="{'isSelected':btnClickIndex==index}" v-if="actSetType.key!='judge'">
									</image>
									<image class="cover-img" :src="item.image" mode="widthFix"
										:class="{'isSelected':btnClickIndex==index}" v-else></image>
									<view class="item-masker flex-row-center-center" v-if="item.locked">
										<image class="locked-icon"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
											mode="aspectFill"></image>
									</view>
									<view class="setting-use-item-label" v-if="item.isUse">使用中</view>
									<view class="item-border-masker"></view>
									<image class="item-choose-icon" v-if="index == actStringIndex"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3a455ebf93f14033a1d9b26e17abe250.png"
										mode="aspectFill"></image>
								</view>
							</view>


							<view class="game-set-list flex-row-start-start" v-if="actSetType.key=='judge'">
								<view class="game-set-item good-after-before flex-row-center-center"
									v-for="(item,index) in judgeList" :key="index" :class="{
							  'green-good': item.RarityLevel == 1,
							  'orange-good': item.RarityLevel == 2,
							  'blue-good': item.RarityLevel == 3,
							  'purple-good': item.RarityLevel == 4,
							  'act-setting-scroll-clothes':index == actJudeEffectIndex
							}" @click="handleGameSettingItemClick(item,index,'judge')">
									<image class="cover-img" :src="item.image" mode="aspectFill"
										:class="{'isSelected':btnClickIndex==index}" v-if="actSetType.key!='judge'">
									</image>
									<image class="cover-img" :src="item.image" mode="widthFix"
										:class="{'isSelected':btnClickIndex==index}" v-else></image>
									<view class="item-masker flex-row-center-center" v-if="item.locked">
										<image class="locked-icon"
											src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
											mode="aspectFill"></image>
									</view>
									<view class="setting-use-item-label" v-if="item.isUse">使用中</view>
									<view class="item-border-masker"></view>
									<image class="item-choose-icon" v-if="index == actJudeEffectIndex"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3a455ebf93f14033a1d9b26e17abe250.png"
										mode="aspectFill"></image>
								</view>
							</view>

						</scroll-view>
					</view>
					<view class="game-pop-button flex-row-center-center">
						<view class="pop-button flex-row-center-center" @click="handleSaveSetting">
							保 存
						</view>

					</view>
				</view>


			</view>

		</mPop>
		<!-- 		<mBack ref="mBack">
		</mBack> -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions,
	} from "vuex";
	import {
		getMyCardList,
		getCardRoomDetail,
		getMyCardDetail,
		getCardGroupDacneList,
		getPropCardList,
		getDanceGameSetting,
		saveDanceGameSetting,
		cardUpGrade
	} from "@/api/game.js"
	import mGiftPop from '@/components/m-gift-pop/index.vue'
	import mPop from "@/components/m-pop/index.vue"
	import mVideo from "@/components/m-video/index.vue";
	import mFunGame from "@/components/m-fun-game/index.vue"
	import mAgentChat from "@/components/m-agent-chat/index.vue"
	import girlMainPage from "@/components/girl-mian-page/index.vue"
	import mBack from "@/components/m-back/index.vue"
	import mChatLevels from "@/components/m-chat-levels/index.vue"
	import {
		getStartList,
		handleReturnRarityLevelUrl
	} from "@/utils/tools.js"
	import {
		isNumber
	} from "util";

	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			storyId: {
				type: String,
				default: "jyxd_player"
			},
			// gameMode: {
			// 	type: String,
			// 	default: "room-private", // room旧的元素  room-private私密模式  room-party派对模式
			// }

		},
		components: {
			mGiftPop,
			mPop,
			mVideo,
			mFunGame,
			mAgentChat,
			girlMainPage,
			mBack,
			mChatLevels
		},
		computed: {
			...mapGetters(["globalGameCtx", "curStoryId", "currentCardId", 'currentCardData']),
			popBtnText() {
				let isDefault = this.actPopItem.isDefault
				let locked = this.actPopItem.locked
				if (isDefault) {
					return "穿戴中"
				} else if (!isDefault && !locked) {
					return "穿 戴"
				} else if (!isDefault && locked) {
					return "去获取"
				}
			},
			popHeightNew() {
				let height = 0
				if (this.gameMode == 'room') {
					if (this.roomType == 'dressup') {
						// this.popHeight = 360
						height = 360
						this.maskCloseAble = false
						this.handleOpenPop()
					} else if (this.roomType == 'accomplishment') {
						// this.popHeight = 300
						height = 300
						this.maskCloseAble = false
						this.handleOpenPop()
					} else {
						// this.popHeight = 300
						height = 300
						this.maskCloseAble = true
					}
				} else if (this.gameMode == 'room-private') {
					if (this.popType == 'more') {
						height = 500
					} else if (this.popType == 'update') {
						height = 550
					} else if (this.popType == 'start-game') {
						height = 550
					} else if (this.popType == 'set') {
						height = 555
					} else if (this.popType == 'sort') {
						height = 1100
					} else {
						height = 550
					}
					this.maskCloseAble = true
				}

				return height

			},
			heartProgressPercent() {
				if (this.heartInfo) {
					let {
						levelValue,
						upgradeValue,
						value
					} = this.heartInfo
					return (((upgradeValue + value) - levelValue) / upgradeValue) * 100
				} else {
					return 0
				}
			},
			dancePowerUpdatePercent() {
				if (this.dancePowerInfo) {
					let {
						levelValue,
						upgradeValue,
						value
					} = this.dancePowerInfo
					return (((upgradeValue + value) - levelValue) / upgradeValue) * 100
				} else {
					return 0
				}
			},
			gamePopTabs() {
				if (this.popType == 'dance') {
					return [this.popTabs[0]]
				} else if (this.popType == 'prop') {
					return [this.popTabs[1]]
				} else {
					return this.popTabs
				}
			},
			danceGameSettingList() {
				let key = this.actSetType.key
				if (key == 'clothes') {
					return this.pianoClothesList
				} else if (key == 'string') {
					return this.pianoStringList
				} else if (key == 'judge') {
					return this.judgeList
				}
			},


		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					// this.handleGetCardList() //测试时使用
					if (newVal === this.storyId) {
						// 新逻辑
						// 请求卡牌列表
						this.handleGetCardList() //正式时使用

						// 旧逻辑


					}
				},
				deep: true,
				immediate: true
			},
			bottomBtnList: {
				handler(newVal, oldVal) {
					this.popBtnList = this.bottomBtnList.filter((item, index) => {
						return item.needPop
					})
				},
				deep: true,
				immediate: true
			},
			roomType: {
				handler(newVal, oldVal) {
					if (this.gameMode == 'room') {
						if (newVal == 'dressup') {
							this.popHeight = 360
							this.maskCloseAble = false
							this.handleOpenPop()
						} else if (newVal == 'accomplishment') {
							this.popHeight = 300
							this.maskCloseAble = false
							this.handleOpenPop()
						} else {
							this.popHeight = 300
							this.maskCloseAble = true
						}
					}

				},
				deep: true,
				immediate: true
			},
			currentCardData: {
				handler(newVal, oldVal) {
					// &&this.curStoryId == this.storyId
					if (newVal) {
						let {
							actionList,
							myRoleCard
						} = newVal
						this.gameOutsideBtns = actionList
						this.myRoleCard = myRoleCard
						this.heartInfo = myRoleCard.infoJson.kindLevel
						this.roleAgentId = myRoleCard.roleAgentId

						// 获取卡组相关乐舞
						this.handleGetCardGropDanceList()
						this.handletGetPropCardList()


					}
				},
				deep: true,
				immediate: true
			},
			isStartGame: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit('hideBackBtn')
						this.$emit('pauseVideo')

					} else {
						this.$emit('showBackBtn')
						this.$emit('playVideo')
					}
				},
				deep: true,
				immediate: true
			},
			isShowFullScreen: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit('hideBackBtn')
						this.$emit('pauseVideo')
					} else {
						this.$emit('showBackBtn')
						this.$emit('playVideo')
					}
				},
				deep: true,
				immediate: true
			},
		},
		data() {
			return {
				toutiaoHeadLeft: 80,
				topBoxHeight: 170,
				isShowLevelMain: false,
				// 排行榜
				userSort: {
					sortNum: "100+",
					avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/65c26d36bb32417f982847fb9a80fe42.jpg",
					name: "总裁",
					popularity: 500
				},
				sortMockData: [{
						name: "沧海一舟",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 1000000,
					},
					{
						name: "贝兒",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 986000,
					},
					{
						name: "留在哥身边",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 666000,
					},
					{
						name: "MC-总裁1015",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 200000,
					},
					{
						name: "是你楚楚",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 13000,
					},
					{
						name: "徐维尼",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 8000,
					},
					{
						name: "留在村委会",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 6000,
					},
					{
						name: "大串-闪闪",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 5000,
					},
					{
						name: "顶流社",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 4000,
					},
					{
						name: "金同学",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 3000,
					},
					{
						name: "屁老板儿",
						avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8b490f889c4e4b2d919effe648af7999.jpg",
						popularity: 1000,
					},
				],
				actSortTabIndex: 0,
				actSortType: null,
				sortTypeList: [{
						type: "hour",
						name: "小时榜"
					},
					{
						type: "popularity",
						name: "人气榜"
					},
				],
				// 新模式
				// 设置相关
				actSetType: {
					name: "音符",
					key: "clothes"
				},
				gameSetTypes: [{
						name: "音符",
						key: "clothes"
					},
					{
						name: "音弦",
						key: "string"
					},
					{
						name: "判定",
						key: "judge"
					},
				],
				actPianoClothesIndex: 0,
				actJudeEffectIndex: 0,
				actStringIndex: 0,
				actPianoClothes: null,
				actString: null,
				actJudeEffect: null,
				pianoClothesList: [],
				pianoStringList: [],
				judgeList: [],
				// 
				gameId: "",
				roleAgentId: "",
				backName: "",
				isHideBack: false,
				fullContentType: 'chatPage',
				isShowFullScreen: false,
				propsCount: 0,
				actDanceParamsJson: null,
				actDance: null,
				actDanceIndex: -1,
				btnClickIndex: -1,
				gamePropList: [],
				danceList: [],
				actPopTab: {
					name: "选择乐舞",
					key: "choose-dance"
				},
				popTabs: [{
						name: "选择乐舞",
						key: "choose-dance"
					},
					{
						name: "局内道具",
						key: "choose-props"
					},
				],
				dancePowerInfo: null, //舞力信息
				heartInfo: null, //心动信息
				myRoleCard: null,
				gameMode: "room-private", // room旧的元素  room-private私密模式  room-party派对模式
				topInfoTop: 84,
				chartStoryId: "",
				popType: "sort",
				pianoGameMode: "default",
				keyboardHeight: -90,
				inputIsFocus: false,
				inputMsg: "",
				currentTime: 0,
				duration: 0,
				isStartGame: false,
				startGameClicked: false,
				// https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241230/VIDe44ce7fb/VIDe44ce7fb.m3u8
				pkVideoUrl: "",
				gameOutsideBtns: [{
						key: "more",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/876acf2b6b074567b8ac777f2746d6dc.png",
						type: "icon", // icon没有名称 button 有名称
					},
					{
						key: "message",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3c01b6d92f924ee49afcb637896f20b3.png"
					},

					{
						key: "update",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fce814ae8d664c4bbae07df59d6a725a.png"
					},
					{
						key: "gift",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1556a8ca2b954cfd9d00a04f59c67439.png"
					},
					{
						key: "dance",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e3cbdd1121c14524b5c9f32bc805ff90.png"
					},
					{
						key: "prop",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/11df41d2f2574c668378c14b1637283a.png"
					},
					{
						key: "start-game",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b82b26d1197e43759882550a71c26425.png",
						name: "挑战"
					}
				],
				gameMoreBtns: [{
					key: "set",
					name: "设置",
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b2d25bf387b34e42b563f517876c7323.png"
				}, ],
				sortBtnTop: 100,
				rpxMenuButtonHeight: 64,
				rpxMenuButtonTop: 100,
				screenWidth: 375,
				actGirlCardIndex: 0,
				actGirlCard: null,
				updateConsumeList: [{
						name: "金币",
						type: "prop",
						num: 10000,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/38de7531db5e4be8b8e6cd49dbacb0eb.png",
						isEmpty: false,
						RarityLevel: 1,
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b4487873c4354b26ad8a6146760c0830.png",
						isEmpty: false,
						RarityLevel: 2,
					},

					{
						name: "抽奖券",
						type: "equipment",
						num: 1,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6035c864cda949ceaa64ec009d3fcdc9.png",
						isEmpty: false,
						RarityLevel: 3,
					},
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/965596a07ce5483481d6aa73455443a1.png",
						isEmpty: false,
						RarityLevel: 4,
					},
				],
				cardList: [],
				// 旧模式
				jumpAccomplishmentStoryId: "",
				maskCloseAble: true,
				actGirlFragMentIndex: 0,
				popHeight: 300,
				roomType: "default", // default默认  dressup装扮  accomplishment才艺
				actPopItem: {
					isDefault: false,
					locked: false,
				},
				// 舞姬主页跳转剧情ID
				jumpGirlMainPageStoryId: "",
				tipText: "敬请期待",
				tipTimeOutId: null,
				showTip: false,

				roomBtnClicked: false,
				jumpRoomListStoryId: "",
				// 房间列表
				jumpOutStoryId: "",
				// 陪玩
				jumpAccompanyStoryId: "",
				// 约会
				jumpDateStoryId: "",
				// 切换
				jumpChangeStoryId: "",
				// 场景
				jumpSceneStoryId: "",
				// 装扮
				jumpDressUpStoryId: "",
				// 直播
				jumpLiveStoryId: "",
				popBtnList: [],
				bottomBtnList: [{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c36dfac849aa47718ad4868d612ccfc2.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/19ab866ff9df448d90ef1ff1363d9aef.png",
						type: "voice",
						needPop: false,
						name: "语音",
						locked: true,
					},

					// {
					// 	icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d799619c22ac47e19b3cb13f2fb28846.png",
					// 	type: "text",
					// 	needPop: false,
					// },
					{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7b04958f57a04adaa48ee225af66ba93.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e7feaadf724e4d9b961bbf647ce3ef66.png",
						type: "date",
						needPop: false,
						name: "约会",
						locked: true,
					},

					{

						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/54448ca7629148afaee3385815588430.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a6a9c9a5bde433f9824de762a983a28.png",
						type: "accomplishment",
						needPop: true,
						name: "才艺",
						locked: false,
					},
					// {
					// 	// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/202c3c619d79468bb5109540b2ec6a63.png",
					// 	icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/24a1a6e3f26c4ba8a192fcc4deb82fae.png",
					// 	type: "accompany",
					// 	needPop: true,
					// 	name: "陪玩",
					// 	locked: true,
					// },

					{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/202c3c619d79468bb5109540b2ec6a63.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b34707dac164403d84df6f76f379f22b.png",
						type: "dynamics",
						needPop: false,
						name: "动态",
						locked: false,
					},


					{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5cd1206224ac44f8bce9da475b77b195.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/367c31cbbefd431fb7380ec013366ec4.png",
						type: "dressup",
						needPop: true,
						name: "装扮",
						locked: false,
					},

					// {
					// 	icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0b356e80796c4299ba6fb006fa78297a.png",
					// 	type: "live",
					// 	needPop: false,
					// 	name: "直播",
					// 	locked: false,
					// },
					{
						// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/aa541fd6c6464860b69925fb0d50be54.png",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6cd8f717cd3249d3830ecbfe098e45a0.png",
						type: "gift",
						needPop: false,
						name: "礼物",
						locked: false,
					},

				]
			}

		},
		mounted() {
			this.gameId = this.globalGameCtx.gameId
			this.getProps()

			// 测试时使用
			// this.$refs.mPop.open()
		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo
				let rpxHeight = this.pxToRpx(height)
				let rpxTop = this.pxToRpx(top)
				this.rpxMenuButtonHeight = rpxHeight
				this.rpxMenuButtonTop = rpxTop
				this.sortBtnTop = rpxHeight + rpxTop + 20
				this.topInfoTop = rpxTop + (rpxHeight - 80) / 2
				this.topBoxHeight = rpxTop + rpxHeight
				// 调用接口获取数据
				// this.handleTestGetRoomCardDetail() //测试时使用

				this.handleGetDanceGameSetting()

				// 抖音获取左上角logo信息
				// #ifdef MP-TOUTIAO
				let {
					leftIcon: {
						width: toutiaoLogoWidth,
						left: toutiaoLogoLeft,
					}
				} = tt.getCustomButtonBoundingClientRect()
				this.toutiaoHeadLeft = this.pxToRpx(toutiaoLogoLeft + toutiaoLogoWidth + 5)
				// console.log("抖音的获取", this.toutiaoHeadLeft);
				// #endif

			} catch (e) {

			}
		},
		methods: {
			...mapActions(["getRoomCardDetail"]),
			getStartList,
			handleReturnRarityLevelUrl,
			getProps() {
				let paramsJson = this.paramsJson

				this.jumpOutStoryId = paramsJson.jumpOutStoryId && paramsJson.jumpOutStoryId.default ? paramsJson
					.jumpOutStoryId.default :
					this
					.jumpOutStoryId


				this.jumpAccompanyStoryId = paramsJson.jumpAccompanyStoryId && paramsJson.jumpAccompanyStoryId.default ?
					paramsJson
					.jumpAccompanyStoryId.default :
					this
					.jumpAccompanyStoryId

				this.jumpDateStoryId = paramsJson.jumpDateStoryId && paramsJson.jumpDateStoryId.default ? paramsJson
					.jumpDateStoryId.default :
					this
					.jumpDateStoryId

				this.jumpChangeStoryId = paramsJson.jumpChangeStoryId && paramsJson.jumpChangeStoryId.default ? paramsJson
					.jumpChangeStoryId.default :
					this
					.jumpChangeStoryId


				this.jumpSceneStoryId = paramsJson.jumpSceneStoryId && paramsJson.jumpSceneStoryId.default ? paramsJson
					.jumpSceneStoryId.default :
					this
					.jumpSceneStoryId

				this.jumpDressUpStoryId = paramsJson.jumpDressUpStoryId && paramsJson.jumpDressUpStoryId.default ?
					paramsJson
					.jumpDressUpStoryId.default :
					this
					.jumpDressUpStoryId

				this.jumpLiveStoryId = paramsJson.jumpLiveStoryId && paramsJson.jumpLiveStoryId.default ? paramsJson
					.jumpLiveStoryId.default :
					this
					.jumpLiveStoryId

				this.jumpRoomListStoryId = paramsJson.jumpRoomListStoryId && paramsJson.jumpRoomListStoryId.default ?
					paramsJson
					.jumpRoomListStoryId.default :
					this
					.jumpRoomListStoryId

				this.jumpGirlMainPageStoryId = paramsJson.jumpGirlMainPageStoryId && paramsJson.jumpGirlMainPageStoryId
					.default ?
					paramsJson
					.jumpGirlMainPageStoryId.default :
					this
					.jumpGirlMainPageStoryId



				this.roomType = paramsJson.roomType && paramsJson.roomType
					.default ?
					paramsJson
					.roomType.default :
					this
					.roomType
				this.jumpAccomplishmentStoryId = paramsJson.jumpAccomplishmentStoryId && paramsJson
					.jumpAccomplishmentStoryId
					.default ?
					paramsJson
					.jumpAccomplishmentStoryId.default :
					this
					.jumpAccomplishmentStoryId

				this.gameMode = paramsJson.gameMode && paramsJson
					.gameMode
					.default ?
					paramsJson
					.gameMode.default :
					this
					.gameMode


			},
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			// 头部点击
			handleChatTopInfoClick() {

			},
			// 排行榜
			formatNumber(num) {
				const number = Number(num);
				if (number < 10000) {
					return String(number);
				}
				const inWan = number / 10000;
				let formatted = inWan.toFixed(1).replace(/\.0$/, '');
				return `${formatted}万`;
			},
			handleSortSwiperChange(e) {
				let current = e.detail.current
				this.actSortTabIndex = current
				this.actSortType = this.sortTypeList[current]
			},
			handleSortSwiperClick(item, index, type) {
				this.actSortType = item
				this.actSortTabIndex = index
				if (type == 'button') {
					this.popType = 'sort'
					this.$refs.mPop.open()
				}
				console.log("当前活跃的是", this.actSortType);
			},
			// 新方法
			// 为了方便调试弄一个获取卡牌数据的测试方法
			handleTestGetRoomCardDetail() {
				let gameId = this.globalGameCtx.gameId
				let cardId = "1881255621877899265"
				this.getRoomCardDetail({
					gameId,
					cardId
				})
			},
			// 处理舞力数据
			handleDancePowerData(result) {
				let notEnough = false
				let consumeList = !result.consumeList ? [] : [...result.consumeList]
				consumeList = consumeList.map((item, index) => {
					if (item.myTotal < item.consumeNum) {
						notEnough = true
					}
					item.RarityLevel = !item.rare ? 0 : item.rare
					return item
				})
				this.dancePowerInfo = {
					...result.infoJson.level,
					consumeList: consumeList,
					notEnough
				}

			},
			// 升级相关方法
			handleCardUpGrade() {
				if (this.dancePowerInfo.notEnough) {
					return
				}
				let cardId = this.actGirlCard.id
				let gameId = this.globalGameCtx.gameId
				cardUpGrade({
					cardId,
					gameId
				}).then(res => {
					let result = res.data.result
					this.handleDancePowerData(result)
					// this.dancePowerInfo = result.infoJson.level

				})
			},
			// 设置相关方法
			handleGameSettingItemClick(item, index, type) {
				this.btnClickIndex = index
				setTimeout(() => {
					this.btnClickIndex = -1
				}, 100)
				if (type == 'clothes') {
					this.actPianoClothesIndex = index
					this.actPianoClothes = item
				} else if (type == 'string') {
					this.actStringIndex = index
					this.actString = item
				} else if (type == 'judge') {
					this.actJudeEffectIndex = index
					this.actJudeEffect = item
				}


			},
			handleGameSetItemClick(item, index) {
				this.actSetType = item
			},
			handleGetDanceGameSetting() {
				getDanceGameSetting().then(res => {
					let result = res.data.result
					this.pianoClothesList = result.pianoClothesList
					this.pianoStringList = result.pianoStringList
					this.judgeList = [...result.judgeList].map((item, index) => {
						return {
							...item,
							image: item.perfect
						}
					})



					let judgeArr = this.judgeList.filter((item, index) => {
						if (item.isUse) {
							this.actJudeEffectIndex = index
						}
						return item.isUse
					})



					let clothesArr = this.pianoClothesList.filter((item, index) => {
						if (item.isUse) {
							this.actPianoClothesIndex = index
						}
						return item.isUse
					})
					let stringArr = this.pianoStringList.filter((item, index) => {
						if (item.isUse) {
							this.actStringIndex = index
						}
						return item.isUse
					})

					if (judgeArr.length) {
						this.actJudeEffect = judgeArr[0]
					}
					if (clothesArr.length) {
						this.actPianoClothes = clothesArr[0]
					}
					if (stringArr.length) {
						this.actString = stringArr[0]
					}



				})
			},
			handleSaveSetting() {
				saveDanceGameSetting({
					pianoStringId: this.actString.id,
					judeEffectId: this.actJudeEffect.id,
					pianoClothesId: this.actPianoClothes.id
				}).then(res => {
					// 重新获取数据
					this.handleGetDanceGameSetting()
					if (this.$refs.mFunGame) {
						this.$refs.mFunGame.handleGetData()
					}

				})

			},


			// 
			handleShowBack() {
				this.isHideBack = false
			},
			handleHideBack() {
				this.isHideBack = true
			},
			handleFullContentBack() {
				this.isShowFullScreen = false
			},
			handleGamePlayAgain() {
				this.handlePkBtnsClick({
					key: 'start-game'
				})
			},
			handleConfirmDance() {
				this.danceList.forEach((citem, cindex) => {
					if (citem.id == this.actDance.id) {
						citem.isDefault = 1
					} else {
						citem.isDefault = 0
					}
				})
			},
			handleStartGame() {
				console.log("开始挑战点击")
				if (this.startGameClicked) {
					return
				}
				try {
					if (this.$refs.mPop) {
						this.$refs.mPop.close()
					}
				} catch (err) {

				}
				this.startGameClicked = true
				if (this.$refs.mFunGame && this.$refs.pkVideo) {
					let intervalId = setInterval(() => {
						if (this.$refs.pkVideo.canPlay) {
							this.isStartGame = true
							this.playVideo()
							this.$refs.mFunGame.handleStartGame('start')
							this.startGameClicked = false
							clearInterval(intervalId)
						}
					}, 500)

					// this.isStartGame = true
					// this.startGameClicked = false
					// this.$refs.mFunGame.handleStartGame('start')
				}
			},
			handleGamePropItemClick(item, index) {

				this.btnClickIndex = index
				setTimeout(() => {
					this.btnClickIndex = -1
				}, 100)

				if (this.propsCount >= 3 && !item.isUse) {
					return
				}

				item.isUse = !item.isUse
				if (item.isUse) {
					this.propsCount++
				} else {
					this.propsCount--
				}


				if (item.num) {

				} else {
					// 获取
				}
			},
			handleGameDacneItemClick(item, index) {
				if (item.locked) {
					return
				}
				this.actDanceIndex = index
				this.actDance = item


				if (this.popType == 'start-game') {
					// 更新配置
					this.actDanceParamsJson = {
						id: index,
						...item.danceParams
					}
					this.pkVideoUrl = item.videoUrl
				}





			},
			handletGetPropCardList() {
				let gameId = this.globalGameCtx.gameId
				getPropCardList({
					gameId
				}).then(res => {
					let result = res.data.result
					this.gamePropList = [...result].map((item, index) => {
						let obj = {
							...item
						}
						obj.image = item.photoUrl
						obj.RarityLevel = item.cardRare
						return obj
					})
				})
			},
			handleGetCardGropDanceList() {
				let roleCardId = this.myRoleCard.id
				let gameId = this.globalGameCtx.gameId
				getCardGroupDacneList({
					roleCardId,
					gameId
				}).then(res => {
					let result = res.data.result
					this.danceList = result
					let obj = this.danceList.find((item, index) => {
						if (item.isDefault) {
							this.actDanceIndex = index
						}
						return item.isDefault == 1
					})
					if (obj) {
						this.actDanceParamsJson = obj.danceParams
						this.actDance = obj
					} else {
						this.actDanceParamsJson = null
					}
					console.log("乐舞列表", this.danceList);
				})
			},
			handleGamePopTabItemClick(item, index) {
				if (this.popType == 'start-game') {
					this.actPopTab = item
				}
			},
			handleGetMyCardDetail(cardId) {
				return new Promise((resolve, reject) => {
					let gameId = this.globalGameCtx.gameId
					getMyCardDetail({
						gameId,
						cardId
					}).then(res => {
						let result = res.data.result
						this.handleDancePowerData(result)
						console.log("舞力详情", this.dancePowerInfo);
						resolve(true)
					}).catch(err => {
						reject(false)
					})
				})

			},
			handleGetCardList() {
				let gameId = this.globalGameCtx.gameId
				getMyCardList({
					gameId,
					locked: false
				}).then(res => {
					let result = res.data.result
					this.cardList = [...result].map((item, index) => {
						let obj = {
							...item
						}
						obj.image = item.coverUrl
						obj.start = item.star
						obj.RarityLevel = item.cardRare
						obj.name = item.cardName

						// // 标记当前卡牌
						// if (item.id == this.myRoleCard.id) {
						// 	this.actGirlCardIndex = index
						// 	this.actGirlCard = obj
						// 	// 获取卡牌升级详情数据
						// 	this.handleGetMyCardDetail(item.id)
						// }

						return obj

					})


					// 标记当前卡牌
					// this.cardList.forEach((item, index) => {
					// 	if (item.id == myRoleCard.id) {
					// 		this.actGirlCardIndex = index
					// 		this.actGirlCard = item
					// 	}
					// })



				})
			},
			handleGirlCardItemClick(item, index) {
				this.actGirlCard = item
				this.actGirlCardIndex = index

				console.log("舞姬卡牌点击", item);

				this.handleGetMyCardDetail(item.id)

				// 测试内容
				// let gameId = this.globalGameCtx.gameId
				// let cardId = item.id
				// this.getRoomCardDetail({
				// 	gameId,
				// 	cardId
				// }).then(res => {
				// 	console.log("请求成功");
				// }).catch(err => {
				// 	console.log("请求失败");
				// })


			},
			handleFunGameJumpBack() {
				this.isStartGame = false
			},
			handleFunGameResult(data) {
				if (isNumber(data)) {
					this.$refs.pkVideo.seekEvent(data)
				}
			},
			playVideo() {
				this.$refs.pkVideo.playVideo();
			},
			pauseVideo() {
				this.$refs.pkVideo.pauseVideo();
			},
			handleKeyBoardHeightChange(e) {
				if (e.detail.height) {
					let rpxHeight = this.pxToRpx(e.detail.height)
					this.keyboardHeight = rpxHeight
				} else {
					this.keyboardHeight = -90
				}

				console.log(this.keyboardHeight, '键盘高度发生变化');
			},
			inputConfirmMessage() {
				console.log("发送消息");
				this.inputMsg = ""
				this.inputIsFocus = false
			},
			inputBlur() {
				console.log("失去焦点");
				this.inputIsFocus = false
				this.keyboardHeight = -90
			},
			inputFocus() {
				console.log("获得焦点");
			},
			handlePkBtnsClick(item, index) {
				console.log("按钮点击", item);
				if (item.key == 'more') {
					this.handleOpenPop()
				}
				let key = item.key
				switch (key) {
					case 'more':
						this.popType = item.key
						this.handleOpenPop('more')
						break;
					case 'input':
						this.handleInputClick()
						break;
					case 'message':
						// if (this.chartStoryId) {
						// 	this.$emit("getGameResult", this.chartStoryId)
						// }
						// this.handlePlayDice()
						this.fullContentType = 'chatPage'
						this.isShowFullScreen = true
						break;
					case 'update':
						this.popType = item.key
						if (!this.dancePowerInfo) {
							this.cardList.forEach((item, index) => {
								if (item.id == this.myRoleCard.id) {
									this.actGirlCardIndex = index
									this.actGirlCard = item
									// 获取卡牌升级详情数据
									this.handleGetMyCardDetail(item.id).then(res => {
										this.handleOpenPop()
									})
								}
							})
						} else {
							this.handleOpenPop()
						}


						break;
					case 'gift':
						if (this.$refs.mGiftPop) {
							this.$refs.mGiftPop.open()
						}
						break;
					case 'dance':
						this.popType = item.key
						this.actPopTab = {
							name: "选择乐舞",
							key: "choose-dance"
						}
						this.handleOpenPop()
						break;
					case 'prop':
						this.popType = item.key
						this.actPopTab = {
							name: "局内道具",
							key: "choose-props"
						}
						this.handleOpenPop()
						break;
					case 'start-game':
						this.actPopTab = {
							name: "选择乐舞",
							key: "choose-dance"
						}
						// 先去更新默认为当前
						this.danceList.forEach((item, index) => {
							if (item.isDefault) {
								this.actDance = item
								this.actDanceIndex = index
								this.actDanceParamsJson = {
									id: index,
									...item.danceParams
								}
								this.pkVideoUrl = item.videoUrl
							}
						})

						this.popType = item.key
						this.handleOpenPop()

						break;

					case 'set':
						this.handleGetDanceGameSetting()
						this.actSetType = {
							name: "音符",
							key: "clothes"
						}
						this.popType = item.key
						this.handleOpenPop()
						break;

					default:
						break;
				}
			},
			handleInputClick() {
				this.inputIsFocus = true
			},
			// pk视频相关方法
			onEnded(e) {
				if (this.$refs.mFunGame) {
					this.$refs.mFunGame.handleGameTimeOver()
				}
			},
			onTimeUpdate(e) {
				if (this.isStartGame) {
					this.duration = e.detail.duration
					this.currentTime = e.detail.currentTime;
				}

			},
			onPlay(e) {},
			//旧方法
			handleOpenPop() {
				if (this.$refs.mPop) {
					this.$nextTick(() => {
						this.$refs.mPop.open()
					})
				}
			},

			handlePopItemClick(item, index) {
				this.actPopItem = item
				this.actGirlFragMentIndex = index
				if (!item.locked) {
					this.$emit("getGameResult", item.seekTime)
				}
			},
			handleOpenChatInfo() {
				console.log("点击了");
				this.fullContentType = "mChatLevels"
				this.isShowFullScreen = true
				this.isHideBack = true
			},
			handleJumpMain() {
				// return
				console.log("点击");
				// if (this.jumpGirlMainPageStoryId) {
				// 	this.$emit('getGameResult', String(this.jumpGirlMainPageStoryId))
				// }
				this.fullContentType = 'mianPage'
				this.isShowFullScreen = true
			},




		}



	}
</script>

<style lang="scss" scoped>
	.m-room {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 999999999;

		.chat-main-box {
			z-index: 99999;
		}

		.m-full-content {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 99999;
			background-color: pink;

			.back-box {
				z-index: 999;
			}

			.full-box {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				z-index: 1;
			}
		}


		.m-room-box-new {
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 9999;

			.room-top-info {
				position: absolute;
				width: 100%;
				height: 80rpx;
				left: 0rpx;
				// padding: 0rpx 80rpx;
				padding-left: 80rpx;
				z-index: 999;
				pointer-events: none;

				.top-agent-name {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: 700;
					color: #fff;
					// width: 120rpx;
					text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

				}

				.top-info-avatar {
					position: relative;
					width: 80rpx;
					height: 80rpx;
					background-color: pink;
					border-radius: 50%;
					margin-right: 20rpx;
					pointer-events: fill;

					.top-info-avatar-img {
						border-radius: 50%;
					}

				}

				.top-info-content {
					flex: 1;
					height: 100%;

					.top-info-name {
						width: 100%;
						font-size: 24rpx;
						line-height: 24rpx;
						font-weight: 700;
						color: #fff;
						text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
						margin-bottom: 30rpx;

						.top-info-name-text {
							pointer-events: fill;
						}
					}

					.top-info-heart-num {
						width: 100%;

						.info-heart-progress {
							position: relative;
							width: 200rpx;
							height: 15rpx;
							border-radius: 10rpx;
							background-color: rgba(255, 255, 255, .6);
							padding: 2rpx;
							pointer-events: fill;

							.heart-progress-inner {
								height: 100%;
								background-image: linear-gradient(to right, rgba(253, 59, 87, 1)0%, rgba(253, 204, 170, 1)100%);
								border-radius: 10rpx;
								transition: width 0.3s linear;
							}

						}

						.heart-progress-text {
							position: absolute;
							left: 0rpx;
							top: -4rpx;
							transform: translateY(-100%);
							width: 100%;
							height: 20rpx;
							font-size: 16rpx;
							line-height: 16rpx;
							color: rgba(255, 255, 255, 1);
							text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

						}
					}



				}

				.info-heart-icon {
					position: absolute;
					right: -6rpx;
					bottom: -4rpx;
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
					z-index: 9;

					.heart-num {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						font-size: 20rpx;
						line-height: 20rpx;
						color: #fff;
						font-weight: 400;
					}

				}




			}



			.input-fly-box {
				position: absolute;
				left: 0rpx;
				width: 100%;
				height: 90rpx;
				background-color: #fff;
				z-index: 99999;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
				// transition: bottom 0.1s;
				bottom: -80rpx;


				.fly-input-box {
					flex: 1;
					height: 65rpx;
					border-radius: 33rpx;
					background-color: rgba(0, 0, 0, .1);
					margin-right: 20rpx;
					overflow: hidden;
					box-sizing: border-box;
					padding: 10rpx 20rpx;

					.fly-input-control {
						flex: 1;
						height: 100%;
						background-color: transparent;
						font-size: 24rpx;
						color: #393939;
						line-height: 24rpx;
					}
				}


				.send-btn {
					height: 55rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					text-align: center;
					border-radius: 30rpx;
					padding: 0rpx 20rpx;
					color: #fff;
					background-color: #f72f54;
				}

				.empty-value {
					opacity: 0.4;
				}
			}

			.pk-functions-box {
				position: absolute;
				left: 0rpx;
				bottom: 0rpx;
				width: 100%;
				// height: 80rpx;
				height: 130rpx;
				z-index: 10;
				padding: 0rpx 30rpx;



				.pk-btns {
					width: 100%;
					height: 100%;

					.pk-btn-item {
						margin-right: 15rpx;

						.pk-btn-item-default {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							background-color: rgba(0, 0, 0, .2);
							// box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, 1);
							border: 2rpx solid rgba(255, 255, 255, .1);

						}

						&:last-child {
							margin-right: 0rpx;
						}

						.pk-btn-item-icon {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.pk-input {
						flex: 1;
						height: 65rpx;
						border-radius: 33rpx;
						background-color: rgba(0, 0, 0, .2);

						// margin-right: 20rpx;
						.input-control {
							flex: 1;
							height: 100%;
							background-color: transparent;
							font-size: 24rpx;
							color: rgba(255, 255, 255, .8);
							line-height: 24rpx;
							padding: 0rpx 20rpx;
						}
					}

					.start-game {
						flex: 1;
						height: 70rpx;
						border-radius: 35rpx;
						background-color: rgba(0, 0, 0, .2);
						border: 2rpx solid rgba(255, 255, 255, .1);

						.start-game-content {
							font-size: 26rpx;
							line-height: 26rpx;
							font-weight: 700;
							color: #fff;

							.start-game-content-text {
								margin-left: 10rpx;
								letter-spacing: 2rpx;
								text-shadow: 0rpx 0rpx 4rpx #9366eb;
							}
						}

					}

					.hide-function-btn {
						display: none;
					}
				}
			}



			.pk-video-box {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0rpx;
				top: 0rpx;
				z-index: 9;
				opacity: 0;
				pointer-events: none;
			}

			.pk-component {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0rpx;
				top: 0rpx;
				z-index: 11;
				opacity: 0;
				overflow: hidden;
			}

			.pk-show {
				opacity: 1;
			}

		}


		.leave-btn {
			bottom: 200rpx;
		}

		.room-pop {
			width: 100%;
			height: 100%;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			background-color: rgba(255, 255, 255, 0);
			backdrop-filter: blur(15rpx);

		}

		.room-private-pop {
			width: 100%;
			height: 100%;
			box-sizing: border-box;

			.room-sort-pop {
				.sort-pop-tab {
					position: relative;
					width: 100%;
					height: 100rpx;
					background-color: #fff;

					&::after {
						content: "";
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 100%;
						height: 2rpx;
						background-color: rgba(0, 0, 0, .1);
						opacity: 0.3;
					}


					.sort-pop-tab-item {
						position: relative;
						width: 180rpx;
						height: 100%;
						color: #a5a2a2;
						font-size: 28rpx;
						line-height: 28rpx;
						font-weight: 700;

						&::after {
							content: "";
							position: absolute;
							left: 50%;
							bottom: 0rpx;
							width: 60rpx;
							height: 4rpx;
							transform: translateX(-50%);
							background-color: #393939;
							opacity: 0;
						}

					}

					.act-sort-pop-tab-item {
						color: #393939;

						&::after {
							opacity: 1;
						}
					}
				}

				.sort-pop-scroll {
					width: 100%;
					flex: 1;
					overflow: hidden;

					.sort-pop-swiper {
						width: 100%;
						height: 100%;

						.sort-pop-swiper-item {
							position: relative;
							width: 100%;
							height: 100%;
							padding: 20rpx;
							padding-bottom: 120rpx;


							.sort-list {
								width: 100%;
							}

							.sort-item {
								position: relative;
								width: 100%;
								height: 120rpx;
								margin-bottom: 10rpx;

								.sort-item-num {
									width: 70rpx;
									height: 100%;
									font-size: 30rpx;
									line-height: 30rpx;
									color: #cacddc;
									font-weight: 700;
									margin-right: 20rpx;
								}

								.sort-item-avatar {
									width: 100rpx;
									height: 100rpx;
									border-radius: 50%;
									overflow: hidden;
								}

								.sort-item-name {
									width: 280rpx;
									height: 100%;
									font-size: 30rpx;
									line-height: 30rpx;
									font-weight: 700;
									color: #393939;
									margin-left: 20rpx;
								}

								.sort-item-popularity {
									position: absolute;
									right: 20rpx;
									top: 50%;
									transform: translateY(-50%);
									font-size: 30rpx;
									line-height: 30rpx;
									font-weight: 700;
									color: #646369;
								}

							}

							.sort-user-item {
								position: absolute;
								left: 0rpx;
								bottom: 0rpx;
								margin-bottom: 0rpx;
								padding: 0rpx 20rpx;
								box-shadow: 0rpx -2rpx 2rpx rgba(0, 0, 0, .05);
							}
						}
					}
				}
			}


			.room-more-pop {

				padding-top: 30rpx;

				.more-btn-list {
					width: 750rpx;
					padding: 10rpx 60rpx;
					flex-wrap: wrap;

					.more-btn-item {
						position: relative;
						width: 120rpx;
						height: 120rpx;
						background-color: rgba(0, 0, 0, .1);
						margin-right: 50rpx;
						border-radius: 20rpx;
						margin-bottom: 60rpx;

						.more-btn-item-img {
							width: 80rpx;
							height: 80rpx;
							border-radius: 20rpx;
						}


						&:nth-child(4n) {
							margin-right: 0rpx;
						}

						.more-btn-item-name {
							position: absolute;
							left: 0rpx;
							bottom: -40rpx;
							width: 100%;
							height: 30rpx;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #000;
							text-align: center;
						}

					}
				}
			}

			.room-update-pop {
				width: 100%;
				padding: 0rpx 20rpx;

				.update-top {
					width: 100%;
					color: #393939;
					margin-top: 40rpx;

					.update-level {
						font-size: 24rpx;
						line-height: 24rpx;
						margin-right: 30rpx;

						.update-level-tip {
							font-weight: 700;
							margin-right: 10rpx;
						}

						.update-level-content {

							.update-level-now {
								font-size: 45rpx;
								font-weight: 700;
								margin: 0rpx 10rpx;
							}

						}
					}

					.update-progress {
						flex: 1;
						height: 100%;

						.update-progress-text {
							width: 100%;
							font-size: 24rpx;
							line-height: 24rpx;
							margin-bottom: 15rpx;

							.tip-text {
								font-weight: 700;
							}

						}

						.update-progress-content {
							width: 100%;
							height: 12rpx;
							background-color: rgba(0, 0, 0, .1);
							border-radius: 6rpx;
							overflow: hidden;

							.update-progress-inner {
								width: 20%;
								height: 100%;
								border-radius: 6rpx;
								background-color: #9366eb;
								box-shadow: 0rpx 0rpx 2rpx #fff;
								transition: width 0.3s linear;
							}

						}
					}
				}

				.update-card-list {
					width: 100%;
					height: 200rpx;
					padding: 0rpx 10rpx;
					margin-top: 30rpx;

					.update-card-list-content {
						height: 100%;

						.update-card-item {
							position: relative;
							width: 120rpx;
							height: 180rpx;
							border-radius: 10rpx;
							overflow: hidden;
							margin-right: 10rpx;
							flex-shrink: 0;
							background-color: #fff;

							.no-choosed-masker {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
								z-index: 9999;
								background-color: rgba(0, 0, 0, .5);
							}

							.dance-girls-item-content {

								.rarity-level {
									position: absolute;
									left: 2rpx;
									top: 2rpx;
									width: 40rpx;
									height: 20rpx;
									z-index: 10;
								}

								.card-level {
									position: absolute;
									right: 4rpx;
									top: 5rpx;
									font-size: 20rpx;
									line-height: 20rpx;
									color: #fff;
									z-index: 999;

									.card-level-icon {
										font-size: 16rpx;
										line-height: 16rpx;
									}
								}

								.start-box {
									padding-left: 0rpx;
								}
							}

							.locked-masker {
								.locked-tip {
									height: 30rpx;
									font-size: 20rpx;
									line-height: 20rpx;
								}
							}


						}
					}
				}

				.update-consume {
					width: 100%;
					margin-top: 20rpx;

					.update-consume-tip {
						width: 100%;
						height: 40rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #393939;

						&::before {
							content: "";
							width: 5rpx;
							height: 20rpx;
							background-color: #9366eb;
							margin-right: 10rpx;
						}

					}

					.update-consume-content {
						width: 100%;

						.update-conusem-inner {
							width: 480rpx;

							.n-reward-list {
								padding: 0rpx;
							}

							.consume-no-enough {
								color: red !important;
								text-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, 1);
							}
						}

						.update-btn-box {
							flex: 1;
							height: 100rpx;
							margin-left: 10rpx;

							.update-btn-content {
								width: 180rpx;
								height: 60rpx;
								border-radius: 5rpx;
								font-size: 24rpx;
								line-height: 24rpx;
								background-image: linear-gradient(to right, #f3f1c6, #efcf80);
								color: #b27439;
								font-weight: 700;
								box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
							}

							.update-btn-not-enough {
								filter: grayscale(1)
							}


						}

					}
				}


			}


			.game-pop {
				width: 100%;

				.game-choose-content {
					// width: 100%;
					width: 750rpx;
					// height: 300rpx;
					flex: 1;
					// margin-top: 20rpx;
					padding: 0rpx 20rpx;
					overflow: hidden;



					.game-dance-list {
						height: 100%;

						.game-dance-item {
							position: relative;
							width: 180rpx;
							height: 270rpx;
							margin-right: 20rpx;
							background-color: #fff;
							border-radius: 10rpx;
							overflow: hidden;
							flex-shrink: 0;
							box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .3);

							.game-dance-item-choosed-icon {
								position: absolute;
								right: 0rpx;
								top: 0rpx;
								width: 30rpx;
								height: 30rpx;
								background-color: #ad53e5;
								border-radius: 0rpx 0rpx 0rpx 10rpx;
								overflow: hidden;
								z-index: 999;
								opacity: 0;
							}

							&:last-child {
								margin-right: 100rpx;
							}


							.item-border {
								position: absolute;
								left: 0rpx;
								bottom: 0rpx;
								width: 100%;
								height: 100%;
								opacity: 0;
								border: 4rpx solid #ad53e5;
								border-radius: 10rpx;
								z-index: 998;
							}

							.item-locked {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								content: "";
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, .5);
								z-index: 999;

								.item-locked-tips {
									width: 100%;
									height: 30rpx;
									color: #fff;
									font-size: 20rpx;
									line-height: 20rpx;
								}
							}



							.dance-item-bottom-info {
								position: absolute;
								left: 0rpx;
								bottom: 0rpx;
								width: 100%;
								height: 80rpx;
								background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .8)100%);
								z-index: 9;

								.dance-item-name {
									width: 100%;
									color: #fff;
									font-size: 20rpx;
									line-height: 20rpx;
									margin-bottom: 20rpx;
									text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
								}
							}
						}

						.act-game-dance-item {
							.game-dance-item-choosed-icon {
								opacity: 1;
							}

							&::after {
								opacity: 0;
							}

							.item-border {
								opacity: 1;
							}

						}
					}

					.game-props-list {
						flex-wrap: wrap;
						padding: 20rpx;

						.game-prop-item {
							position: relative;
							width: 170rpx;
							height: 255rpx;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
							border-radius: 10rpx;
							overflow: hidden;
							flex-shrink: 0;
							box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .1);

							&:nth-child(4n) {
								margin-right: 0rpx;
							}

							.prop-item-center-content {
								position: relative;
								width: 130rpx;
								height: 130rpx;
								box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.1);
								background-color: rgba(255, 255, 255, 0.3);
								overflow: hidden;
								margin-top: 20rpx;

								.thing-num {
									position: absolute;
									right: 0rpx;
									bottom: 4rpx;
									display: inline-block;
									padding: 0 8rpx;
									font-size: 16rpx;
									color: #fff;
									background-color: rgba(0, 0, 0, 0.3);
									line-height: 20rpx;
									z-index: 9;
								}


							}

							.prop-item-intro {
								width: 100%;
								font-size: 18rpx;
								line-height: 18rpx;
								text-align: center;
								color: #a5a2a2;
								margin-top: 10rpx;
							}

							.prop-item-button {
								width: 130rpx;
								height: 45rpx;
								margin-bottom: 20rpx;
								// background-color: #f9d972;
								background-image: linear-gradient(to right, #f3f1c6, #efcf80);
								color: #b27439;
								text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
								box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
								font-size: 24rpx;
								line-height: 24rpx;
								border-radius: 6rpx;
								margin-top: 10rpx;

								.consume-icon {
									width: 30rpx;
									height: 30rpx;
									margin-right: 10rpx;
								}
							}


						}
					}
				}

				.game-props-choose-content {
					padding: 0rpx;
				}



			}

			.game-set-box {
				.game-set-content {
					// width: 750rpx;
					width: 740rpx;
					flex: 1;
					overflow: hidden;
					margin-top: 20rpx;

					.game-set-list {
						width: 100%;
						padding: 4rpx 20rpx;

						flex-wrap: wrap;

						.game-set-item {
							position: relative;
							width: 160rpx;
							height: 160rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
							background-color: rgba(255, 255, 255, 0.3);
							box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.2);
							padding: 10rpx;
							overflow: hidden;


							&:nth-child(4n) {
								margin-right: 0rpx;
							}

							.item-border-masker {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								z-index: 9999;
								width: 100%;
								height: 100%;
								border: 2rpx solid transparent;
							}

							.item-choose-icon {
								position: absolute;
								right: 0rpx;
								top: 0rpx;
								width: 30rpx;
								height: 30rpx;
								z-index: 999;
								border-radius: 0rpx 0rpx 0rpx 10rpx;
								background-color: #ad53e5;
							}


						}

						.act-setting-scroll-clothes {
							.item-border-masker {
								// border-color: #fff;
								// border-color: #ad53e5;
							}
						}

					}
				}
			}

			.pop-default {
				width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				overflow: hidden;
			}
		}








	}

	.setting-use-item-label {
		position: absolute;
		left: 5rpx;
		top: 5rpx;
		font-size: 20rpx;
		line-height: 30rpx;
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
		color: #fff;
		font-weight: 700;
		text-align: center;
		z-index: 3;
		// background-color: #5ce64c;
		background-color: #ad53e5;

	}

	.btnIsClick {
		animation: buttonClickScale 0.1s linear;
	}

	.cancleBtn {
		background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%) !important;
		color: #646369 !important;
	}

	.game-pop-tabs {
		position: relative;
		width: 100%;
		height: 60rpx;
		margin-top: 20rpx;
		padding: 0rpx 20rpx;

		.props-count {
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			width: 100rpx;
			height: 100%;
			color: #393939;
			font-size: 24rpx;
			line-height: 24rpx;
		}

		.game-pop-tab-item {
			position: relative;
			width: 120rpx;
			height: 100%;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #393939;
			font-weight: 700;
			margin-right: 10rpx;

			&:after {
				position: absolute;
				left: 50%;
				bottom: 0rpx;
				transform: translateX(-50%);
				content: "";
				width: 20rpx;
				height: 4rpx;
				opacity: 0;
				background-color: #9366eb;
			}

		}

		.act-game-pop-tab-item {
			color: #9366eb;

			&:after {
				opacity: 1;
			}
		}
	}

	.game-pop-button {
		width: 100%;
		// flex: 1;
		height: 100rpx;

		.pop-button {
			width: 220rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			line-height: 60rpx;
			background-image: linear-gradient(to right, #f3f1c6, #efcf80);
			color: #b27439;
			font-weight: 700;
			box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
		}


	}

	.item-masker {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;

		.locked-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.isSelected {
		animation: selecteAni 0.2s linear;
	}


	.pk-sort-btn {
		position: absolute;
		left: 30rpx;
		width: 100rpx;
		height: 34rpx;
		background-color: rgba(0, 0, 0, .3);
		border-radius: 18rpx;
		box-sizing: content-box;
		padding: 0rpx 10rpx;

		.pk-sort-icon {
			width: 30rpx;
			height: 30rpx;
		}

		.pk-sort-btn-list {
			flex: 1;
			height: 100%;
			color: #fff;
			font-size: 18rpx;
			color: #fff;
			line-height: 18rpx;

			.sort-btn-item {
				width: 100%;
				height: 100%;
			}

			.sort-swiper {
				width: 100%;
				height: 100%;

				.sort-swiper-item {
					width: 100%;
					height: 100%;
				}
			}
		}

	}

	@keyframes selecteAni {

		0% {
			transform: scale(1);
		}


		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}

	}

	.m-heart {
		position: relative;
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;

		.heart-num {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-size: 20rpx;
			line-height: 20rpx;
			color: #fff;
			font-weight: 400;
		}
	}
</style>